<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <link href="css/style.css" rel="stylesheet"/>
    <link href="css/base.css" rel="stylesheet"/>

    <script src="js/jquery1.42.min.js" type="text/javascript"></script>
    <script src="js/flexible.min.js" type="text/javascript"></script>
    <script src="js/vue.js" type="text/javascript"></script>
    <title>买卡</title>
</head>
<body style="background-color: rgb(242,242,242);">
<div >
    <div>
        <div>
            <div class="card_leixing" id="one">
                <div class="card_left"><p class="title">卡类</p><p>游戏卡</p></div>
                <div class="card_right"><img src="img/hy1.png"> ></div>
            </div>
            <div class="card_leixing" id="two">
                <div class="card_left"><p class="title">卡种</p><p>游戏卡</p></div>
                <div class="card_right"> ></div>
            </div>
            <div class="card_leixing" id="three">
                <div class="card_left"><p class="title">卡类</p><p>请选择单张面值</p></div>
                <div class="card_right"> ></div>
            </div>
        </div>
        <!-- tab-->
        <div class="tab">
            <div class="tab_card">
                <div class="on">单卡提交</div>
                <div>批量提交</div>
            </div>
            <div class="conten">
                <div class="one_card">
                    <div class="account"><span>卡号</span><input placeholder="请输入账号"></div>
                    <div class="pwd"><span>卡密</span><input placeholder="请输入卡密"></div>
                    <div class="sipt">微信提示：提交有效券后请勿擅自使用，卡号与卡密必填，并确保卡密及面值填写正确！</div>
                </div>
                <div class="two_card">
                    <textarea placeholder="每张卡密为一张，卡号与卡密之间用‘空格’隔开"></textarea>
                </div>
            </div>
        </div>
        <div class="fixed">
            <div class='sipt_tong' id="four">提交即表示你同意<span><a href="huishou_xieyi.html">《柠檬时代礼品网礼品转让协议服务条款》</a></span></div>
            <div class='fixed_btn'>提交</div>
        </div>
    </div>
    <div class="fount">
        <div>
            <a href="index.html">
                <img src="img/home1.png">
                <div>首页</div>
            </a>
        </div>
        <div>
            <a href="classification.html">
                <img src="img/hy123.png">
                <div>分类</div>
            </a>
        </div>
        <div>
            <a href="sell_crad.html">
                <img src="img/hy111.png">
                <div  class="active">买卡</div>
            </a>
        </div>
        <div>
            <a href="grzx.html">
                <img src="img/my.png">
                <div>我的</div>
            </a>
        </div>

    </div>
<!--卡类-->
    <div class="card_posi">
        <div class="card_list">
            <div class="card_posi_title"><div></div><div>请选择卡的种类</div><div><img src="img/hy23.png" class="contact_pop_up1"></div></div>
            <div class="list">
                <ul>
                    <li><img src="img/hy.png">电商卡</li>
                    <li><img src="img/hy.png">电商卡</li>
                    <li><img src="img/hy1.png">电商卡</li>
                    <li><img src="img/hy1.png">电商卡</li>
                    <li><img src="img/hy1.png">电商卡</li>
                    <li><img src="img/hy1.png">电商卡</li>
                    <li><img src="img/hy1.png">电商卡</li>
                    <li><img src="img/hy1.png">电商卡</li>
                </ul>
            </div>
        </div>
    </div>
<!--卡种-->
   <div class="card_posi1">
       <div class="card_list">
           <div class="card_posi_title"><div></div><div>请选择卡的种类</div><div><img src="img/hy23.png" class="contact_pop_up"></div></div>
           <div class="list1">
               <ul class="recycling1">
                   <li><a>
                       <img src="img/hy1.png">
                       <div class="recyling_card1">电信卡</div>
                       <div class="recyling_discount1">5折</div>
                   </a></li>
                   <li><a>
                       <img src="img/hy1.png">
                       <div class="recyling_card1">电信卡</div>
                       <div class="recyling_discount1">5折</div>
                   </a></li>
                   <li><a>
                       <img src="img/hy1.png">
                       <div class="recyling_card1">电信卡</div>
                       <div class="recyling_discount1">5折</div>
                   </a></li>
                   <li><a>
                       <img src="img/hy1.png">
                       <div class="recyling_card1">电信卡</div>
                       <div class="recyling_discount1">5折</div>
                   </a></li>
                   <li><a>
                       <img src="img/hy1.png">
                       <div class="recyling_card1">电信卡</div>
                       <div class="recyling_discount1">5折</div>
                   </a></li>
                   <li><a>
                       <img src="img/hy1.png">
                       <div class="recyling_card1">电信卡</div>
                       <div class="recyling_discount1">5折</div>
                   </a></li>
                   <li><a>
                       <img src="img/hy1.png">
                       <div class="recyling_card1">电信卡</div>
                       <div class="recyling_discount1">5折</div>
                   </a></li>
                   <li><a>
                       <img src="img/hy1.png">
                       <div class="recyling_card1">电信卡</div>
                       <div class="recyling_discount1">5折</div>
                   </a></li>
                   <li><a>
                       <img src="img/hy1.png">
                       <div class="recyling_card1">电信卡</div>
                       <div class="recyling_discount1">5折</div>
                   </a></li>
               </ul>
           </div>
       </div>
   </div>
<!--面值-->
    <div class="card_posi2">
        <div class="card_posi2_list">
            <div class="card_posi_title"><div></div><div>请选择单卡面值</div><div><img src="img/hy23.png" class="contact_pop_up2"></div></div>
            <div class="mianzhiList">
                <ul>
                    <li><div class="top">4000</div><div class="top_bottom">￥500<span>6折</span></div></li>
                    <li><div class="top">4000</div><div class="top_bottom">￥500<span>6折</span></div></li>
                    <li><div class="top">4000</div><div class="top_bottom">￥500<span>6折</span></div></li>
                    <li><div class="top">4000</div><div class="top_bottom">￥500<span>6折</span></div></li>
                    <li><div class="top">4000</div><div class="top_bottom">￥500<span>6折</span></div></li>
                    <li><div class="top">4000</div><div class="top_bottom">￥500<span>6折</span></div></li>
                </ul>

            </div>
        </div>
    </div>
    <!-- 协议-->
    <div class="card_posi3">
        <div class="card_posi3_list">
            <div class="card_posi_title"><div></div><div>请确定以下协议在提交</div><div><img src="img/hy23.png" class="contact_pop_up3"></div></div>
            <div class="mianzhiList" id="app">
                <div class="one1" @click="one1"><img src="img/hy50.png" v-if="state ==1"><img src="img/hy51.png" v-if="state==0"><div>我已阅读接受【<span>礼品卡出售协议</span>】和【<span>礼品卡回收说明</span>】</div></div>
                <div class="two1" @click="two1"><img src="img/hy51.png" v-if="state ==1"><img src="img/hy50.png" v-if="state ==0"><div>我确认该卡号卡密<span>来源合法</span>，如有问题，本人愿意承担一切法律责任</div></div>
                <div class="card_posi3_btn">提交</div>
            </div>
        </div>
    </div>
</div>
</body>

<script type="text/javascript">

    window.onload =function(){
        new Vue({
            el:'#app',
            data:{
                state:0,
            },
            methods:{

                one1:function(){
                    this.state =1
                },
                two1:function(){
                    this.state =0
                }
            }
        })
    }

</script>
<script>
    $(document).ready(function(){
        $('.conten>div').eq(0).show();
        $('.tab_card>div').click(function(){
            var index = $(this).index()
            $(this).addClass('on')
            $(this).siblings().removeClass('on')
            $('.conten>div').eq(index).show();
            $('.conten>div').eq(index).siblings().hide()
        })
//    var one = $('#one') 点击卡类 出现列表
        $('#one').click(function(){
            $('.card_list').slideDown()
            $('.card_posi').fadeIn()
        })
        //关闭蒙层
        $('.card_posi').click(function(e){
            var _con = $(this).children('.card_list')
//        !$(e.target).closest(".pop_up").length
            if(!_con.is(e.target) && _con.has(e.target).length === 0){
                $('.card_list').slideUp()
                $('.card_posi').fadeOut()

            }
        })
        $('.contact_pop_up1').click(function(){
            $('.card_list').slideUp()
            $('.card_posi').fadeOut()
        })
//    two
        $('#two').click(function(){
            $('.card_list').slideDown()
            $('.card_posi1').fadeIn()
        })
        //关闭蒙层
        $('.card_posi1').click(function(e){
            //弹框显示的内容
            var _con = $(this).find('.card_list')
            var _dis = $('.contact_pop_up1')
            if(!_con.is(e.target) && _con.has(e.target).length === 0){
                $('.card_list').slideUp()
                $('.card_posi1').fadeOut()
            }
        })
        $('.contact_pop_up').click(function(){
            $('.card_list').slideUp()
            $('.card_posi1').fadeOut()
        })
        //three
        $('#three').click(function(){
            $('.card_posi2_list').slideDown()
            $('.card_posi2').fadeIn()
        })
        //关闭蒙层
        $('.card_posi2').click(function(e){
            console.log(11)
            var _con = $(this).children('.card_posi2_list')
//        !$(e.target).closest(".pop_up").length
            if(!_con.is(e.target) && _con.has(e.target).length === 0){
                $('.card_posi2_list').slideUp()
                $('.card_posi2').fadeOut()

            }
        })
        $('.contact_pop_up2').click(function(){
            $('.card_posi2_list').slideUp()
            $('.card_posi2').fadeOut()
        })
//    four
        $('#four').click(function(){
            $('.card_posi3_list').slideDown()
            $('.card_posi3').fadeIn()
        })
        //关闭蒙层
        $('.card_posi3').click(function(e){
            console.log(11)
            var _con = $(this).children('.card_posi3_list')
//        !$(e.target).closest(".pop_up").length
            if(!_con.is(e.target) && _con.has(e.target).length === 0){
                $('.card_posi3_list').slideUp()
                $('.card_posi3').fadeOut()

            }
        })
        $('.contact_pop_up3').click(function(){
            $('.card_posi3_list').slideUp()
            $('.card_posi3').fadeOut()
        })
    })

</script>
</html>